<!DOCTYPE html>
<html class="user-body">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>用户选择预订(客户端)</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/weui.min.css">
</head>
<body class="user-body">
<div class="user-wrp">
    <div class="book-ctx" v-cloak>
        <ul class="seat-type-ctl user">
            <li v-for="(item, index) in seatType">
                <span>{{ item.name }}</span>
                <span :class="item.type"></span>
            </li>
            <div class="clear"></div>
        </ul>
        <div class="seat-list user" v-if="row!==0&&col!==0">
            <div v-for="(item1, index1) in row" class="row-line">
                <div v-for="(item2, index2) in col"
                     :class="['col-line', seatRect[index1+','+index2] && seatRect[index1+','+index2].isbook ? 'booked' : '', seatRect[index1+','+index2] && seatRect[index1+','+index2].ispick ? 'picked ' + seatRect[index1+','+index2].tableType : '', seatRect[index1+','+index2] && seatRect[index1+','+index2].issbook ? 'sbooked' : '']"
                     :data-index="index1+','+index2"
                     :data-table = "seatRect[index1+','+index2] ? seatRect[index1+','+index2].tableIndex : ''"
                     @click="hoverShow(index1+','+index2, $event)"
                >
                </div>
            </div>
        </div>
        <ul class="ctl-btn">
            <li>
                <button @click="getTableInfo">立即预订</button>
            </li>
        </ul>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/user.js"></script>
</body>
</html>